<template>
	<div class="slide-show">
		<div class="slide-img">
			<a :href="slides[nowIndex].href">
				<img :src="slides[nowIndex].src">
			</a>
		</div>

		<div class="page">
			<h2>{{slides[nowIndex].title}}</h2>
			<ul class="slide-pages">
				<li>&lt;</li>
				<li v-for="(item,index) in slides" @click="goto(index)">
					<a>{{index+1}}</a>
				</li>
				<li>&gt;</li>
			</ul>
		</div>	
	</div>
</template>
<script type="text/javascript">
	export default{
		data(){
			return{
				nowIndex:0,
				invTime:2000,
				slides:[
					{
						src:require('../../static/slideShow/pic1.jpg'),
						title:'宇智波鼬',
						href:'detail/analysis'
					},
					{
						src:require('../../static/slideShow/pic2.jpg'),
						title:'我爱罗',
						href:'detail/count' 
					},
					{
						src:require('../../static/slideShow/pic3.jpg'),
						title:'鸣人',
						href:'http://xxx.xxx.com'
					},
					{
						src:require('../../static/slideShow/pic4.jpg'),
						title:'晓',
						href:'detail/forecas'
					}
				]	
			}
		},
		methods:{
			goto(index){
				this.nowIndex=index
			}
		}
	}

</script>
<style type="text/css">
	/*轮播图*/
	.slide-show{
		width: 880px;
		height: 500px;
		position:relative;
		margin-bottom: 10px;
	}
	
	.slide-pages{
		position: absolute;
		bottom: 0px;
		color: white;
		right: 20px;
	}
	
	.page h2{
		position: absolute;
		bottom: 0px;
		color: white;
		margin-left: 20px;
	}

	.slide-pages li{
		float: left;
	}

	.page{
		width: 880px;
		height: 40px;
		position: absolute;
		bottom: 0px;
		line-height: 40px;
		background-color: rgba(36,40,43,0.6);
	}

	.slide-pages a{
		margin: 0px 5px;
	}
</style>